

<template>
  <view class="Mall4j container">
    <view class="page ">
      <view class="group_1 ">
        <view class="box_3 flex-col">
          <view class="image-text_7 flex-row ">
            <image class="image_3" :src=" distInfo.pic || 'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/head04.png'" />
            <span class="text-group_7 clamp_text">{{ distInfo.nickName }}</span>
          </view>
          <view class="group_5 flex-row">
            <view class="text-group_8 flex-col justify-between">
              <span class="text_2 clamp_text">{{ wxs.toPrice(settledAmount) }}</span>
              <span class="text_3">{{ i18n.myBalance }}</span>
            </view>
            <view class="text-group_8 flex-col justify-between">
              <span class="text_2 clamp_text">{{ wxs.toPrice(addupAmount) }}</span>
              <span class="text_3">{{ i18n.totalIncome }}</span>
            </view>
            <view @tap="toWithdrawal" class="text-wrapper_1 flex-col"><span class="text_6">提现</span></view>
          </view>
        </view>
        <view class="box_1 flex-col">
          <view class="block_1 flex-row justify-between">
            <view class="group_2 flex-row">
              <view class="image-text_1 flex-row justify-between" @tap="toPromotionProdPage">
                <img class="image_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNG082f726368ab3eea4fe113a81b4ff5c5.png" />
                <span class="text-group_1">{{ i18n.promoteGoods }}</span>
              </view>
            </view>
            <view class="group_2 flex-row">
              <view class="image-text_1 flex-row justify-between" @tap="toInvitationCards">
                <img class="image_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNGc86ad9f18a3d243852274efb2ddb89c1.png" />
                <span class="text-group_1">{{ i18n.inviteFriends }}</span>
              </view>
            </view>
          </view>
        </view>
        <view class="box_2 flex-col justify-around">
          <view class="image-text_3 flex-row " @tap="toMyUserPage">
            <img class="label_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNGb7349f2a107f24d10c9769b198ddb3f3.png" />
            <span class="text-group_3">{{ i18n.myUser }}</span>
            <text class="arrow" style="  top: 20rpx;  right: -88rpx;" />
          </view>

          <view class="image-text_3 flex-row " @tap="toPromotionOrderPage">
            <img class="label_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNG3e1ad000e256e7aee362c448cfb06c71.png" />
            <span class="text-group_3">{{ i18n.myPromotion }}</span>
            <text class="arrow" style="  top: 20rpx;  right: -88rpx;" />
          </view>
          <view class="image-text_3 flex-row " @tap="toIncomeDetailsPage">
            <img class="label_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNGc8bed00c548451d53e3d7974fc814ec0.png" />
            <span class="text-group_3">{{ i18n.incomeBreakdown }}</span>
            <text class="arrow" style="  top: 20rpx;  right: -88rpx;" />
          </view>
          <view class="image-text_3 flex-row " style="border: 0px solid;" @tap="toWalletCashPage">
            <img class="label_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNGa2fb50b415e236ae9356c3c9ff7b1c48.png" />
            <span class="text-group_3">{{ i18n.withdrawalsRecord }}</span>
            <text class="arrow" style="  top: 20rpx;  right: -88rpx;" />
          </view>
        </view>

      </view>
    </view>

    <!-- 用户信息
    <view class="user-information back_mai">
      <view class="user-info-box">
        <view class="user-head-portrait">
          <image :src=" distInfo.pic ? distInfo.pic: 'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/head04.png'" />
        </view>
        <view class="username">{{ distInfo.nickName }}</view>
      </view>
      <view class="notice" data-dist="true" @tap="toNotice">
        <view class="notice-icon">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/notice.png" />
        </view>
        <view v-if="!disNotice.length" class="notice-txt">{{ i18n.noAnnouncement }}</view>
        <block v-if="disNotice.length > 0">
          <swiper circular="true" vertical="true" autoplay="true" duration="1000" class="swiper-cont">
            <block v-for="(item, index) in disNotice" :key="index">
              <swiper-item class="items">{{ item.msgTitle }}</swiper-item>
            </block>
          </swiper>
          <view class="right-more">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/more2.png" />
          </view>
        </block>
      </view>

    </view>
     -->
    <!-- 横排
    <view class="user-info">
      <view class="info-cont">
        
        <view class="income">
          <view class="income-left">
            <view class="item">{{ i18n.myBalance }}</view>
            <view class="num">{{ wxs.toPrice(settledAmount) }}</view>
          </view>
          <view class="income-right">
            <view class="item">{{ i18n.totalIncome }}</view>
            <view class="num">{{ wxs.toPrice(addupAmount) }}</view>
          </view>
          <view class="draw-btn" @tap="toWithdrawal">
            <view class="btn">{{ i18n.withdrawalsNow }}</view>
          </view>
        </view>
      </view>
    </view>
     -->
    <!-- 横排
    <view class="lists">
      <view class="list-item" @tap="toPromotionProdPage">
        <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/tuiguang02.png" class="icon" mode="widthFix" />
        <text class="item-text">{{ i18n.promoteGoods }}</text>
      </view>
      <view class="list-item" @tap="toInvitationCards">
        <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/tuiguang01.png" class="icon" mode="widthFix" />
        <text class="item-text">{{ i18n.inviteFriends }}</text>
      </view>
    </view>
    <view class="sorting-menu">
      <view class="menu-cont">
        <view class="menu-cont-list" @tap="toMyUserPage">
          <view class="icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/menu-01.png" mode="widthFix" />
          </view>
          <view class="list-title">{{ i18n.myUser }}</view>
          <text class="arrow" />
        </view>
        <view class="menu-cont-list" @tap="toPromotionOrderPage">
          <view class="icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/menu-02.png" mode="widthFix" />
          </view>
          <view class="list-title">{{ i18n.myPromotion }}</view>
          <text class="arrow" />
        </view>
      </view>
      <view class="menu-cont">
        <view class="menu-cont-list" @tap="toIncomeDetailsPage">
          <view class="icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/menu-03.png" mode="widthFix" />
          </view>
          <view class="list-title">{{ i18n.incomeBreakdown }}</view>
          <text class="arrow" />
        </view>
        <view class="menu-cont-list" @tap="toWalletCashPage">
          <view class="icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/menu-04.png" mode="widthFix" />
          </view>
          <view class="list-title">{{ i18n.withdrawalsRecord }}</view>
          <text class="arrow" />
        </view>
      </view>
    </view>
     -->

  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
// pages/dis-centers/dis-center.js
var http = require("../../utils/http.js");

export default {
  data () {
    return {
      "unsettledAmount": 0,
      // 待结算金额
      "settledAmount": 0,
      // 可提现金额
      "invalidAmount": 0,
      // 已失效金额
      "addupAmount": 0,
      // 累计收益
      disNotice: [],
      // 分销公告
      distInfo: {},
      // settledAmount: "",
      // addupAmount: ""
    };
  },

  components: {},
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.distributioncenter
    });
    // 分销员信息
    this.getDisInfo();
    // 分销钱包数据
    this.getDisInfoData();
    // 获取分销公告
    this.getDistributionMsg();
  },
  methods: {
    // 获取分销公告
    getDistributionMsg: function () {
      var ths = this;
      var params = {
        url: '/p/distribution/msg/page',
        method: 'GET',
        data: {
          // current: 1,
          isTop: '' // size: 10
        },
        callBack: res => {
          console.log(res);
          ths.setData({
            disNotice: res.records
          });
        }
      };
      http.request(params);
    },

    // 跳转到分销员等级页面
    toSalesmanLevel () {
      uni.navigateTo({
        url: '/pages/salesman-level/salesman-level'
      });
    },

    // 跳转到公告页面
    toNotice () {
      if (this.disNotice.length > 0) {
        uni.navigateTo({
          url: '/pages/recent-news/recent-news?isDist=' + true
        });
      }
    },
    /**
     * 获取分销员信息
     */
    getDisInfo () {
      http.request({
        url: "/p/distribution/user/distributionUserInfo",
        method: "GET",
        data: {
          shopId: 1
        },
        callBack: res => {
          if (res.state === -1) {
            uni.showModal({
              title: '',
              showCancel: false,
              content: this.i18n.distributorBanned,
              confirmText: this.i18n.confirm,
              confirmColor: "#eb2444",
              success: (modal1Res) => {
                if (modal1Res.confirm) {
                  uni.switchTab({
                    url: '/pages/user/user'
                  })
                }
              }
            })
          }

          if (res.state === 2) {
            uni.showToast({
              title: this.i18n.distributorCleared,
              mask: true,
              icon: 'none'
            })
            uni.showModal({
              title: '',
              cancelText: this.i18n.cancel,
              content: this.i18n.distributorCleared,
              confirmText: this.i18n.confirm,
              confirmColor: "#eb2444",
              success: (modal2Res) => {
                if (modal2Res.confirm) {
                  uni.redirectTo({
                    url: '/pages/apply-dist-con/apply-dist-con'
                  })
                } else if (modal2Res.cancel) {
                  uni.switchTab({
                    url: '/pages/user/user'
                  })
                }
              }
            })
          }
          this.distInfo = res;
          wx.setStorageSync('distInfo', res);
        }
      })
    },
    /**
     * 获取用户钱包数据
     */
    getDisInfoData: function () {
      var params = {
        url: "/p/distribution/user/info",
        method: "GET",
        data: {
          shopId: 1
        },
        callBack: res => {
          this.setData({
            settledAmount: res.distributionUserWallet.settledAmount,
            addupAmount: res.distributionUserWallet.addupAmount
          });
        }
      };
      http.request(params);
    },

    /**
     * 跳转收入明细
     */
    toIncomeDetailsPage: function () {
      uni.navigateTo({
        url: '/pages/income-details/income-details'
      });
    },

    /**
     * 跳转提现记录
     */
    toWalletCashPage: function () {
      uni.navigateTo({
        url: '/pages/take-notes/take-notes'
      });
    },

    /**
     * 跳转提现规则
     */
    toWalletCashRulePage: function () {
      uni.navigateTo({
        url: '/pages/draw-rule/draw-rule'
      });
    },

    /**
     * 跳转至我的用户
     */
    toMyUserPage: function () {
      uni.navigateTo({
        url: '/pages/my-users/my-users'
      });
    },

    /**
     * 跳转我的推广界面
     */
    toPromotionOrderPage: function () {
      uni.navigateTo({
        url: '/pages/promotion-order/promotion-order'
      });
    },

    /**
     * 跳转我的推广商品
     */
    toPromotionProdPage: function () {
      uni.navigateTo({
        url: '/pages/promotion-prod/promotion-prod'
      });
    },

    /**
     * 跳转到邀请好友页面
     */
    toInvitationCards: function () {
      uni.navigateTo({
        url: '/pages/invitation-cards/invitation-cards'
      });
    },

    /**
     * 跳转到提现
     */
    toWithdrawal: function () {
      uni.navigateTo({
        url: '/pages/withdrawal/withdrawal'
      });
    }
  }
};
</script>
<style  scoped lang='scss'>
@import "./dis-center.scss";
page {
  background: #f2f2f2;
}
.container {
  background: #f2f2f2;
}
.page {
  background: #f2f2f2;
  height: 100%;
  .group_1 {
    .box_1 {
      height: 225rpx;
      .block_1 {
        height: 162.2093023255814rpx;
        margin: 40.116279069767444rpx 10.465116279069768rpx 0
          10.465116279069768rpx;
        .group_2 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 13px;
          width: 354.06976744186045rpx;
          height: 162.2093023255814rpx;
          .image-text_1 {
            width: 226.74418604651163rpx;
            height: 87.20930232558139rpx;
            margin: 38.372093023255815rpx 0 0 34.883720930232556rpx;
            .image_1 {
              width: 87.20930232558139rpx;
              height: 87.20930232558139rpx;
            }
            .text-group_1 {
              width: 125.5813953488372rpx;
              height: 48.83720930232558rpx;
              overflow-wrap: break-word;
              color: rgba(17, 17, 17, 1);
              font-size: 31.3953488372093rpx;
              font-family: Source Han Sans-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 45.348837209302324rpx;
              margin-top: 19.186046511627907rpx;
            }
          }
        }
      }
      .block_2 {
        background-color: rgba(216, 216, 216, 1);
        position: absolute;
        left: 101.16279069767442rpx;
        top: 4130.232558139535rpx;
        width: 10.465116279069768rpx;
        height: 20.930232558139537rpx;
      }
    }
    .box_2 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 13px;
      margin: 0 10rpx;
      .image-text_3 {
        margin: 0 24.4186046512rpx;
        border-bottom: 1rpx solid #d8d8d8;
        padding: 28rpx 0;
        .label_1 {
          width: 52.325581395348834rpx;
          height: 52.325581395348834rpx;
        }
        .text-group_3 {
          width: 500rpx;
          height: 40.116279069767444rpx;
          overflow-wrap: break-word;
          color: rgba(17, 17, 17, 1);
          font-size: 27.906976744186046rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 40.116279069767444rpx;
          margin-top: 5.232558139534884rpx;
          margin-left: 15rpx;
        }
      }
    }
    .box_3 {
      height: 346rpx;
      background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/dis-center/MasterDDSSlicePNG6624629bbf917421f001036abc7305c5.png)
        100% no-repeat;
      background-size: 100% 100%;
      .group_4 {
        width: 413.3720930232558rpx;
        height: 48.83720930232558rpx;
        margin: 101.16279069767442rpx 0 0 27.906976744186046rpx;
        .thumbnail_5 {
          width: 34.883720930232556rpx;
          height: 34.883720930232556rpx;
          margin-top: 8.720930232558139rpx;
        }
        .text_1 {
          width: 132.5581395348837rpx;
          height: 48.83720930232558rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 33.13953488372093rpx;
          font-family: Source Han Sans-Normal;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 48.83720930232558rpx;
        }
      }
      .image-text_7 {
        width: 94%;
        height: 103.651163rpx;
        margin: 68rpx 0 3rpx 34.8837209302rpx;
        .image_3 {
          width: 104.65116279069767rpx;
          height: 104.65116279069767rpx;
          display: inline-block;
          border-radius: 50%;
        }
        .text-group_7 {
          margin-left: 20rpx;
          width: 76%;
          height: 45.348837209302324rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 31.3953488372093rpx;
          font-family: Source Han Sans-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 45.348837209302324rpx;
          margin-top: 29.651162790697676rpx;
        }
      }
      .group_5 {
        background-color: rgb(255, 255, 255);
        border-radius: 13px;
        position: absolute;
        left: 10.4651162791rpx;
        top: 205.9534883721rpx;
        width: 729.0697674419rpx;
        height: 162.2093023256rpx;
        .text-group_8 {
          width: 246.511628rpx;
          height: 90.6976744186rpx;
          margin: 29.6511627907rpx 0 0 33.1395348837rpx;
          .text_2 {
            width: 100%;
            height: 50.5813953488rpx;
            overflow-wrap: break-word;
            color: rgb(17, 17, 17);
            font-size: 34.8837209302rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 50.5813953488rpx;
          }
          .text_3 {
            width: 100%;
            height: 34.8837209302rpx;
            overflow-wrap: break-word;
            color: rgb(156, 156, 156);
            font-size: 24.4186046512rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.8837209302rpx;
            margin: 5.2325581395rpx 0 0 1.7441860465rpx;
          }
        }
        .text-group_9 {
          width: 146.51162790697674rpx;
          height: 90.69767441860465rpx;
          margin: 29.651162790697676rpx 0 0 132.5581395348837rpx;
          .text_4 {
            width: 146.51162790697674rpx;
            height: 50.58139534883721rpx;
            overflow-wrap: break-word;
            color: rgba(17, 17, 17, 1);
            font-size: 34.883720930232556rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 50.58139534883721rpx;
          }
          .text_5 {
            width: 115.11627906976744rpx;
            height: 34.883720930232556rpx;
            overflow-wrap: break-word;
            color: rgba(156, 156, 156, 1);
            font-size: 24.41860465116279rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
            margin-top: 5.232558139534884rpx;
          }
        }
        .text-wrapper_1 {
          background-color: rgb(255, 255, 255);
          border-radius: 23px;
          height: 55.8139534884rpx;
          border: 1px solid rgb(255, 141, 26);
          width: 104.6511627907rpx;
          margin: 52.3255813953rpx 31.3953488372rpx 0 31.302326rpx;
          .text_6 {
            height: 55rpx;
            overflow-wrap: break-word;
            color: rgb(255, 141, 26);
            font-size: 24.4186046512rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: center;
            white-space: nowrap;
            line-height: 55rpx;
          }
        }
      }
    }
  }
}
</style>
